 @import "base/_base";
.Register{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    min-height:900px;
    width:100%;
    @include allCenter;
    flex-flow: column wrap;
    .logo{
        margin:0 auto;
        width:118px;
        height:63px;
        margin-top:25px;
        img{
            width:118px;
            height:63px;
        }
    }
   .item{
        width:380px;
        margin:0 auto;
        margin-top:60px;
        background:#fff;
        padding:50px 35px ; 
        box-shadow: 0px 0px 15px #EBEBEC;
        border:1px solid #ddd ;
        h1{
            font-size:22px;
            color:$color4;
            text-align:center;
        }
        .labels{
            margin-top:60px;
            label{
                @include flex;
                padding-bottom:5px ;
                width:380px;
                margin-bottom:35px;
                border-bottom:1px solid $color4;
                position:relative;
                span{
                    width:80px;
                    display:block;
                    color:#666666;
                }
                input{
                    width:300px;
                    color:#cccccc;
                }
                .errorTip{
                    position:absolute;
                    bottom:-25px;
                    left:0;
                    font-size:12px;
                    color:red;
                    // display:none;
                }
                
            }
            //input number去除手勢按鈕
            .phone-number,.code{
                input::-webkit-outer-spin-button,
                    input::-webkit-inner-spin-button {
                        -webkit-appearance: none !important;
                        margin: 0;
                }
                input[type="number"] {
                       -moz-appearance: textfield;
                }
            }
            label input::-webkit-input-placeholder{
                     color:#cccccc;
                }
            label input::-moz-input-placeholder{
                 color:#cccccc;
            }
            label input::-ms-input-placeholder{
                 color:#cccccc;
            }
            label input::-o-input-placeholder{
                 color:#cccccc;
            }
            label:nth-child(5){
                justify-content:space-between;
                align-items:flex-end;
                margin-top:-15px;
                padding:4px 0;
                .btn{
                    padding:2px 10px;
                    font-size:14px;
                }
                input{
                    width:150px;
                }
            }
        }
        .btn{
            width:117px;
            height:34px;
            @include btn2($color6,$color6,#fff) ;
            border-radius:30px;
            font-size:18px;
            a{
                color:#fff;
            }
        }
        #codeBtn{
            width:117px;
            height:34px;
            border-radius:30px;
            font-size:14px;
            text-align:center;
            border: 1px solid $color6;
            padding:5px 10px;
            border-radius: 20px;
            color: #fff;
            background-color: $color6;
            opacity: 1;
        }
        #codeBtnNo{
            width:117px;
            height:34px;
            border-radius:30px;
            font-size:14px;
            text-align:center;
            padding:5px 10px;
            border-radius: 20px;
            color: #fff;
            opacity: 1;
            background-color: $color3;
            border: 1px solid $color3;
        }
        .text{
            @include vertical-centering;
            margin-bottom:40px;
            position:relative;
           .onOff{
                width:12px;
                height:12px;
                margin-right:8px;
                img{
                    width:100%;
                }
            }
            >a{
                color:$color6;
                margin-left:15px;
            }
        }
        .text2{
             @include vertical-centering;
              position:relative;
              margin-top:40px;
           .btn{
                position:absolute;
                right:0;
                top: -8px;
                display:block;
            }
            >a{
                color:$color6;
                margin-left:15px;
            }
        }
        .register-btn{
            width:calc(100% -20px);
            .el-button {
                width:100%;
                background:$color6;
                border:1px solid $color6;
                color:#fff;
                border-radius:20px;
                
                span{
                    font-size:16px;
                }
            }
        }
   }
   .success{
    width:380px;
    height:200px;
    margin:0 auto;
    margin-top:100px;
    background:#fff;
   @include allCenter;
   flex-flow: column wrap;
    p{
        text-align:center;
         font-size:20px;
    }
    p+p{
        margin-top:30px;
        @include vertical-centering;
        font-size:14px;
        a{
            width:120px;
            @include btn2($color6,$color6,#fff)
            padding:10px 0px;
        }
    }
   }
}